<template>
	<div style="height: 100%;" v-loading="loading">
		<div style="display: flex;" class=" mt10">
			<div style="width: 1223px;height: 980px;overflow-y: auto;">
				<div v-for="(item,index) in dataList1" :key="index" class="mb20">

					<div class="mb10 displayFlexBet">
						<div class="displayFlex">
							<div v-if="item.monitorType == 'CEMS'" class="textCenter mr5 font13 colorfff"
								style="width: 48px;height: 20px;background: linear-gradient(-90deg, #CE8555, #E4A982);border-radius: 3px;">
								CEMS
							</div>
							<div v-if="item.monitorType == 'AIR_SITE'" class="textCenter mr5 font13 colorfff"
								style="width: 58px;height: 20px;background: linear-gradient(-90deg, #5B81A8, #8DADCE);;border-radius: 3px;">
								空气微站
							</div>
							<div class="mr10 colorfff font14">{{item.outletName}}（{{item.monitorName}}）</div>
							<div v-if="item.onlineStatusStr == '在线'" class="textCenter mr5 font13"
								style="width: 40px;height: 20px;background: #8DE5A8;border-radius: 3px;color: #016344;">
								{{item.onlineStatusStr}}
							</div>
							<div v-else class="textCenter mr5 font13"
								style="width: 40px;height: 20px;background: #C8C8C8;border-radius: 3px;color: #444;">
								{{item.onlineStatusStr}}
							</div>
						</div>
						<div style="color: #75E7FF;font-size: 12px;">{{item.latestTime}}</div>
					</div>

					<div class="displayFlex" style="">
						<div v-if="item.pollutionList && item.pollutionList.length > 0" class="mr20"
							style="width: calc(100% - 302px);overflow-x: auto;white-space: nowrap;border-radius: 8px;border: 1px solid #0B3485;">
							<div v-for="(item2,index2) in item.pollutionList" :key="index2"
								@click="$router.push('/wasteGas/onlineSurveyDet?outletId='+item.outletId)"
								:style="{'borderRight':(index2 == item.pollutionList.length - 1)?'':'1px solid#0B3485'}"
								style="padding: 20px;width: 310px;display: inline-block;" class="mr10 bra8 point">
								<div class="mb10 colorfff font14">{{item2.pollutionName}}</div>
								<div style="color: #75E7FF;">
									<span class="font24" v-if="item2.monitorType == 'CEMS'">{{item2.zsAmount}}</span>
									<span class="font24" v-else>{{item2.actualAmount}}</span>
									<span class="font14">{{item2.unitValue}}</span>
								</div>
							</div>
						</div>

						<div style="border: 1px solid #0B3485;background: #041C62;width: 302px;" class="displayFlex">
							<div style="padding: 20px 10px;width: 151px;">
								<div class="displayFlex mb10" style="justify-content: center;">
									<img src="@/assets/sIcon77.png" style="width: 20px;height: 20px;" class="mr5" />
									<span class="font14 colorfff">24小时</span>
									<span class="font14 colorfff">超标</span>
								</div>
								<div class="font24 textCenter" style="color: #75E7FF;">
									{{item.warningNum || '--'}}
								</div>
							</div>
							<div style="width: 1px;height: 100px;background: #0B3485;"></div>
							<div style="padding: 20px 10px;width: 151px;">
								<div class="textCenter mb10">
									<span class="font14 colorfff">30天时段</span>
									<span class="font14 colorfff">达标</span>
								</div>
								<div class="font24 textCenter" style="color: #75E7FF;">
									{{item.qualifiedPercent || '--'}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div style="width:616px;height: 980px;overflow-y: auto;" class=" ml10">
				<div class="mb10">
					<div style="background: linear-gradient(270deg, #041C62, #1649A4);line-height: 32px;"
						class="font18 colorfff">
						<div :style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon16.png')+')'}"
							style="background-size: 140px 32px;background-repeat: no-repeat;padding-left: 20px;">
							CEMS
						</div>
					</div>

					<div style="background: #041C62;padding: 20px;">
						<div class="displayFlexBet mb10">
							<div style="flex: 1;border: 1px solid #1649A4;height: 80px;" class="pad10 bra8 mr10">
								<div class="mb5 font24" style="color: #75E7FF;">{{dataList2.onlineNum}}</div>
								<div><el-progress :percentage="(dataList2.onlineNum/dataList2.totalNum)*100"
										:show-text="false"></el-progress></div>
								<div class="font12 colorfff mt5">
									<span>在线设备·共{{dataList2.totalNum}}台</span>
								</div>
							</div>
							<div style="flex: 1;border: 1px solid #1649A4;height: 80px;" class="pad10 bra8 mr10">
								<div class="mb5 font24" style="color: #75E7FF;">{{dataList2.mnDataNum}}</div>
								<div class="font12 colorfff">近30天小时数据</div>
							</div>
						</div>

						<div class="displayFlex" style="margin: 22px 20px;">
							<img src="@/assets/bigScreen/icon20.png" style="width: 14px;height: 20px;" />
							<span style="color:#fff;margin-left:10px" class="font14">达标率</span>
						</div>

						<div class="displayFlexBet mb10">
							<div style="width:calc(33.3% - 10px);position:relative" class="textCenter">
								<el-progress type="circle" :percentage="dataList2.hourQPercent" color="#9CEAB4" :width="100"
									:show-text="false"></el-progress>
								<div style="position:absolute;left:0;right:0;top:0;padding:20px">
									<div class="font24" style="color: #75E7FF;">{{dataList2.hourQPercent}}%</div>
									<div class="font13 colorfff mt2">24h</div>
								</div>
							</div>

							<div style="width:calc(33.3% - 10px);position:relative" class="textCenter">
								<el-progress type="circle" :percentage="dataList2.dayQPercent" color="#9CEAB4" :width="100"
									:show-text="false"></el-progress>
								<div style="position:absolute;left:0;right:0;top:0;padding:20px">
									<div class="font24" style="color: #75E7FF;">{{dataList2.dayQPercent}}%</div>
									<div class="font13 colorfff mt2">30天</div>
								</div>
							</div>

							<div style="width:calc(33.3% - 10px);position:relative" class="textCenter">
								<el-progress type="circle" :percentage="dataList2.yearQPercent" color="#9CEAB4" :width="100"
									:show-text="false"></el-progress>
								<div style="position:absolute;left:0;right:0;top:0;padding:20px">
									<div class="font24" style="color: #75E7FF;">{{dataList2.yearQPercent}}%</div>
									<div class="font13 colorfff mt2">年度</div>
								</div>
							</div>
						</div>

						<div id="barChart1" style="width: 100%;height: 200px" class="mb20"></div>

						<div class="mb16" v-if="dataList2 && dataList2.offlineList">
							<div class="displayFlexBet pad10" style="background: #1649A4;">
								<div class="displayFlex">
									<img src="@/assets/bigScreen/icon21.png" style="width: 15px;height: 15px;" />
									<span class="ml20 colorfff font14">离线设备</span>
								</div>
								<div class="colorfff font14">{{dataList2.offlineList.length}}</div>
							</div>
							<div style="background: #041C62;border: 1px solid #1649A4;">
								<div v-for="(item,index) in dataList2.offlineList" class="font14 colorfff"
									style="padding: 17px 54px;"
									:style="{ 'borderBottom': index == (dataList2.offlineList.length - 1)?'':'1px solid#1649A4'}">
									<div>{{item.outletName}}</div>
									<!-- <div class="font10 color-info mt5" style="color: #999xz;">{{item.createTime}}</div> -->
								</div>
								<div v-if="dataList2.offlineList.length == 0" class="textCenter font14 colorfff pad20">
									暂无离线设备
								</div>
							</div>
						</div>

						<div class="mb16" v-if="dataList2.warningBaseList">
							<div class="displayFlexBet pad10" style="background: #1649A4;">
								<div class="displayFlex">
									<img src="@/assets/bigScreen/icon22.png" style="width: 15px;height: 15px;" />
									<span class="ml20 colorfff font14">高频问题点位</span>
								</div>
								<div class="colorfff font14">{{dataList2.warningBaseList.length}}</div>
							</div>

							<div style="background: #041C62;border: 1px solid #1649A4;">
								<div v-for="(item,index) in dataList2.warningBaseList" class="font14 colorfff displayFlexBet"
									style="padding: 17px 54px;"
									:style="{'borderBottom': index == (dataList2.warningBaseList.length - 1)?'':'1px solid#1649A4'}">
									<div>{{item.outletName}}</div>
									<div>{{item.warningNum}}</div>
								</div>
								<div v-if="dataList2.warningBaseList.length == 0" class="textCenter font14 colorfff pad20">
									暂无高频问题点位
								</div>
							</div>
						</div>

						<!-- <div class=""  v-if="dataList2.goingWarningList">
							<div class="displayFlexBet pad10" style="background: #1649A4;">
								<div class="displayFlex">
									<img src="@/assets/bigScreen/icon23.png" style="width: 15px;height: 15px;" />
									<span class="ml20 colorfff font14">预警未处理</span>
								</div>
								<div class="colorfff font14">{{dataList2.goingWarningList.length}}</div>
							</div>
							
							<div style="background: #041C62;border: 1px solid #1649A4;">
								<div v-for="(item,index) in dataList2.goingWarningList" class="font14 colorfff"
									style="padding: 17px 54px;display: flex;justify-content: space-between;"
									:style="{'borderBottom': index == (dataList2.goingWarningList.length - 1)?'':'1px solid#1649A4'}">
									<div style="width: 300px;">{{item.problemContent}}</div>
									<div>{{item.createTime}}</div>
								</div>
								<div v-if="dataList2.goingWarningList.length == 0" class="textCenter font14 colorfff pad20">
									暂无预警
								</div>
							</div>
						</div> -->
					</div>
				</div>


				<div class="mb10">
					<div style="background: linear-gradient(270deg, #041C62, #1649A4);line-height: 32px;"
						class="font18 colorfff">
						<div :style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon16.png')+')'}"
							style="background-size: 140px 32px;background-repeat: no-repeat;padding-left: 20px;">
							TSP
						</div>
					</div>

					<div style="background: #041C62;padding: 20px;">
						<div class="displayFlexBet mb16">
							<div style="flex: 1;border: 1px solid #1649A4;height: 80px;" class="pad10 bra8 mr10">
								<div class="mb5 font24" style="color: #75E7FF;">{{dataList4.onlineNum}}</div>
								<div><el-progress :percentage="(dataList4.onlineNum/dataList4.totalNum)*100"
										:show-text="false"></el-progress></div>
								<div class="font12 colorfff mt5">
									<span>在线设备·共{{dataList4.totalNum}}台</span>
								</div>
							</div>
							<div style="flex: 1;border: 1px solid #1649A4;height: 80px;" class="pad10 bra8 mr10">
								<div class="mb5 font24" style="color: #75E7FF;">{{dataList4.mnDataNum}}</div>
								<div class="font12 colorfff">近30天小时数据</div>
							</div>
							<div style="flex: 1;border: 1px solid #1649A4;height: 80px" class="pad10 bra8 displayFlexBet">
								<div>
									<div class="mb5 font24" style="color: #75E7FF;">{{dataList4.yearQPercent}}%</div>
									<div class="font12 colorfff">达标率</div>
								</div>

								<div style="position: relative;">
									<el-progress type="circle" :percentage="dataList4.yearQPercent" color="#9CEAB4" :width="40"
										:stroke-width="4" :show-text="false"></el-progress>
									<img src="@/assets/bigScreen/icon24.png"
										style="width: 15px;height: 20px;position: absolute;left: 12.5px; top: 10px;" />
								</div>
							</div>
						</div>

						<div class="mb16" v-if="dataList4.goingWarningList">
							<div class="displayFlexBet pad10" style="background: #1649A4;">
								<div class="displayFlex">
									<img src="@/assets/bigScreen/icon22.png" style="width: 15px;height: 15px;" />
									<span class="ml20 colorfff font14">预警未处理</span>
								</div>
								<div class="colorfff font14">{{dataList4.goingWarningList.length}}</div>
							</div>

							<div style="background: #041C62;border: 1px solid #1649A4;">
								<div v-for="(item,index) in dataList4.goingWarningList" class="font14 colorfff"
									style="padding: 17px 54px;display: flex;justify-content: space-between;"
									:style="{'borderBottom': index == (dataList4.goingWarningList.length - 1)?'':'1px solid#1649A4'}">
									<div style="width: 300px;">{{item.problemContent}}</div>
									<div>{{item.createTime}}</div>
								</div>
								<div v-if="dataList4.goingWarningList.length == 0" class="textCenter font14 colorfff pad20">
									暂无预警
								</div>
							</div>
						</div>

						<div class="" v-if="dataList4.warningBaseList">
							<div class="displayFlexBet pad10" style="background: #1649A4;">
								<div class="displayFlex">
									<img src="@/assets/bigScreen/icon22.png" style="width: 15px;height: 15px;" />
									<span class="ml20 colorfff font14">高频问题点位</span>
								</div>
								<div class="colorfff font14">{{dataList4.warningBaseList.length}}</div>
							</div>

							<div style="background: #041C62;border: 1px solid #1649A4;">
								<div v-for="(item,index) in dataList4.warningBaseList" class="font14 colorfff displayFlexBet"
									style="padding: 17px 54px;"
									:style="{'borderBottom': index == (dataList4.warningBaseList.length - 1)?'':'1px solid#1649A4'}">
									<div>{{item.outletName}}</div>
									<div>{{item.warningNum}}</div>
								</div>
								<div v-if="dataList4.warningBaseList.length == 0" class="textCenter font14 colorfff pad20">
									暂无高频问题点位
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="mb10">
					<div style="background: linear-gradient(270deg, #041C62, #1649A4);line-height: 32px;"
						class="font18 colorfff">
						<div :style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon16.png')+')'}"
							style="background-size: 140px 32px;background-repeat: no-repeat;padding-left: 20px;">
							空气微站
						</div>
					</div>

					<div style="background: #041C62;padding: 20px;">
						<div class="displayFlexBet mb16">
							<div style="flex: 1;border: 1px solid #1649A4;height: 80px;" class="pad10 bra8 mr10">
								<div class="mb5 font24" style="color: #75E7FF;">{{dataList5.onlineNum}}</div>
								<div><el-progress :percentage="(dataList5.onlineNum/dataList5.totalNum)*100"
										:show-text="false"></el-progress></div>
								<div class="font12 colorfff mt5">
									<span>在线设备·共{{dataList5.totalNum}}台</span>
								</div>
							</div>
							<div style="flex: 1;border: 1px solid #1649A4;height: 80px;" class="pad10 bra8 mr10">
								<div class="mb5 font24" style="color: #75E7FF;">{{dataList5.mnDataNum}}</div>
								<div class="font12 colorfff">近30天小时数据</div>
							</div>
							<div style="flex: 1;border: 1px solid #1649A4;height: 80px" class="pad10 bra8 displayFlexBet">
								<div>
									<div class="mb5 font24" style="color: #75E7FF;">{{dataList5.yearQPercent}}%</div>
									<div class="font12 colorfff">达标率</div>
								</div>

								<div style="position: relative;">
									<el-progress type="circle" :percentage="dataList5.yearQPercent" color="#9CEAB4" :width="40"
										:stroke-width="4" :show-text="false"></el-progress>
									<img src="@/assets/bigScreen/icon24.png"
										style="width: 15px;height: 20px;position: absolute;left: 12.5px; top: 10px;" />
								</div>
							</div>
						</div>

						<div class="mb16" v-if="dataList5.goingWarningList">
							<div class="displayFlexBet pad10" style="background: #1649A4;">
								<div class="displayFlex">
									<img src="@/assets/bigScreen/icon22.png" style="width: 15px;height: 15px;" />
									<span class="ml20 colorfff font14">预警未处理</span>
								</div>
								<div class="colorfff font14">{{dataList5.goingWarningList.length}}</div>
							</div>

							<div style="background: #041C62;border: 1px solid #1649A4;">
								<div v-for="(item,index) in dataList5.goingWarningList" class="font14 colorfff"
									style="padding: 17px 54px;display: flex;justify-content: space-between;"
									:style="{'borderBottom': index == (dataList5.goingWarningList.length - 1)?'':'1px solid#1649A4'}">
									<div style="width: 300px;">{{item.problemContent}}</div>
									<div>{{item.createTime}}</div>
								</div>
								<div v-if="dataList5.goingWarningList.length == 0" class="textCenter font14 colorfff pad20">
									暂无预警
								</div>
							</div>
						</div>

						<div class="" v-if="dataList5.warningBaseList">
							<div class="displayFlexBet pad10" style="background: #1649A4;">
								<div class="displayFlex">
									<img src="@/assets/bigScreen/icon22.png" style="width: 15px;height: 15px;" />
									<span class="ml20 colorfff font14">高频问题点位</span>
								</div>
								<div class="colorfff font14">{{dataList5.warningBaseList.length}}</div>
							</div>

							<div style="background: #041C62;border: 1px solid #1649A4;">
								<div v-for="(item,index) in dataList5.warningBaseList" class="font14 colorfff displayFlexBet"
									style="padding: 17px 54px;"
									:style="{'borderBottom': index == (dataList5.warningBaseList.length - 1)?'':'1px solid#1649A4'}">
									<div>{{item.outletName}}</div>
									<div>{{item.warningNum}}</div>
								</div>
								<div v-if="dataList5.warningBaseList.length == 0" class="textCenter font14 colorfff pad20">
									暂无高频问题点位
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';

	import moment from 'moment'
	import elProgress from '@/components/progress'

	let that
	export default {
		name: "onlineSurveyPreview",
		components: {
			elProgress
		},
		data() {
			return {
				value: '',
				monitorType: '',
				loading: true,
				dataList: {},
				dataList1: [],
				dataList2: {},
				dataList3: {
					typeList: []
				},
				dataList4: {},
				dataList5: {},
				selectItem: {
					code: '',
					label: ''
				}
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.getGasMonitorSummary()

			that.getGasOnlineLatestMonitorList()
		},
		methods: {

			formcategory(charyId, xAxisData, seriesData) {
				var chartDom = document.getElementById(charyId);
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					tooltip: {
						trigger: 'axis'
					},
					grid: {
						top: "12%",
						bottom: "10%",
						left: "5%"
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: xAxisData,
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false // 不显示坐标轴刻度线
						},
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: "#75E7FF",
							},
							// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: false,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: ["#1649A4"],
							},
						},
						axisTick: { //坐标轴刻度
							show: false
						},
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: "rgba(215, 215, 215, 1)",
							},
							// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					series: [{
						showSymbol: false,
						data: seriesData,
						type: 'line',
						lineStyle: {
							color: "#75E7FF" // 设置线的颜色为红色
						}
					}]
				};

				option && myChart.setOption(option);

			},

			//统计监测设备概览
			getGasMonitorSummary() {
				that.ajax({
					url: '/gasOutlet/getGasMonitorSummary',
					data: {
						monitorType: that.monitorType
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.dataList3 = result.data
						//that.selectItem = result.data.typeList[0]
						that.getGasMonitorDet()
					},
				})
			},

			formLineChart() {
				let xAxisData = []
				let seriesData = []
				for (let item of that.dataList2.dayPercentList) {
					xAxisData.push(item.shortCreateTimeStr)
					seriesData.push(item.qualifiedPercent)
				}
				console.log(xAxisData, seriesData)
				setTimeout(function() {
					that.formcategory("barChart1", xAxisData, seriesData)
				}, 500);
			},

			getGasMonitorDet: function(value) {
				that.ajax({
					url: '/gasOutlet/getGasMonitorDet',
					data: {
						monitorType: "CEMS"
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.dataList2 = result.data
						that.formLineChart()
					}
				})

				that.ajax({
					url: '/gasOutlet/getGasMonitorDet',
					data: {
						monitorType: "TSP"
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.dataList4 = result.data
					}
				})

				that.ajax({
					url: '/gasOutlet/getGasMonitorDet',
					data: {
						monitorType: "AIR_SITE"
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.dataList5 = result.data
					}
				})
			},

			getGasOnlineLatestMonitorList: function(value) {
				that.loading = true
				that.ajax({
					url: '/gasOutlet/getGasOnlineLatestMonitorList',
					data: JSON.stringify({
						monitorType: that.selectItem.code
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList1 = result.data
						that.loading = false
					}
				})
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.selected {
		color: #3A3EF4;
	}

	.selectedBorder {
		border-bottom: 1px solid#3A3EF4;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
	}

	.el-tag.el-tag--success {
		background: #8DE5A8;
		color: #333;
	}
</style>